<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>

    <a-card :bordered="false">
      <div class="table-operator" style="display: flex; justify-content: space-between">
        <span></span>
        <a-button type="primary" @click="onCreate">新建</a-button>
      </div>
      <s-table rowKey="id" size="default" :columns="columns" :data="loadData" ref="table">
        <span slot="created_at" slot-scope="text">{{ text | timeFormat }}</span>
        <span slot="icon" slot-scope="icon">
          <img :src="icon" v-if="icon" style="width: 50px; height: 50px" alt="" />
        </span>
        <span slot="status" slot-scope="status, item">
          <a-switch :default-checked="status === '1'" @change="onStatusChange(item)" />
        </span>
        <span slot="action" slot-scope="text, record">
          <a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
          <a-divider type="vertical" />
          <a-popconfirm title="确认删除分类吗？" @confirm="handleDelete(record)">
            <a-button type="link" size="small">删除</a-button>
          </a-popconfirm>
        </span>
      </s-table>
    </a-card>

    <!-- 新建 -->
    <cyyModal
      :visible="visibleEdit"
      :title="form.id == 0 ? '添加分类' : '编辑分类'"
      @handleCancel="visibleEdit = false"
      @handleOk="onEditOk"
    >
      <a-form-model ref="catForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="名称" prop="name" has-feedback>
          <cyyInput v-model="form.name"></cyyInput>
        </a-form-model-item>
        <a-form-model-item label="图标">
          <!-- 上传图片 -->
          <cyyUploadImg
            @uploadSuccess="
              (e) => {
                form.pic_url = e.data
              }
            "
            @deleteImg="form.pic_url = ''"
            :imgSrc="form.pic_url"
          >
          </cyyUploadImg>
        </a-form-model-item>
        <a-form-model-item label="排序" help="数字越大越靠前">
          <a-input-number v-model="form.sort" :min="0" :max="9999999" />
        </a-form-model-item>
        <a-form-model-item label="是否显示">
          <a-switch :default-checked="form.is_show === '1'" @change="onChange" />
        </a-form-model-item>
      </a-form-model>
    </cyyModal>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { cyyUploadImg, cyyInput, cyyModal } from '@/components/CyyUi/index'
import { getAdoptCatList, adoptCatChangeStatus, adoptCatDelItem, adoptCatEditItem } from '@/api/adopt/cat'

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '名称',
    dataIndex: 'name',
  },
  {
    title: '图标',
    dataIndex: 'pic_url',
    scopedSlots: {
      customRender: 'icon',
    },
  },
  {
    title: '状态',
    dataIndex: 'is_show',
    scopedSlots: {
      customRender: 'status',
    },
  },
  {
    title: '创建时间',
    dataIndex: 'created_at',
    scopedSlots: {
      customRender: 'created_at',
    },
  },
  {
    title: '操作',
    width: '250px',
    dataIndex: 'action',
    scopedSlots: {
      customRender: 'action',
    },
  },
]

const defaultForm = {
  id: 0,
  name: '',
  desc: '',
  pic_url: '',
  sort: 100,
  is_show: '1',
}
export default {
  name: '',
  components: {
    STable,
    cyyUploadImg,
    cyyInput,
    cyyModal,
  },
  data() {
    return {
      activeTab: '1',
      tabs: [
        {
          value: '0',
          text: '认养列表',
          path: 'AdoptList',
        },
        {
          value: '1',
          text: '认养分类',
          path: 'AdoptCat',
        },
        {
          value: '2',
          text: '认养订单',
          path: 'AdoptOrderList',
        },
        {
          value: '3',
          text: '认养设置',
          path: 'AdoptSetting',
        },
        {
          value: '4',
          text: '设备管理',
          path: 'DeviceList',
        },
        {
          value: '5',
          text: '配送订单',
          path: 'CostOrderList',
        },
      ],
      columns,
      loadData: (parameter) => {
        return getAdoptCatList({
          ...parameter,
          name: this.keyword,
        })
          .then((res) => {
            return res.data
          })
          .catch((err) => {
            this.$message.error(err.message)
            this.$refs.table.localLoading = false
          })
      },
      rules: {
        name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
      },
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 5,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 16,
        },
      },
      keyword: '',
      visibleEdit: false,
      confirmLoading: false,
      form: Object.assign({}, defaultForm),
    }
  },
  watch: {},
  created() {},
  computed: {},
  filters: {},
  mounted() {},
  methods: {
    // tab切换
    tabChange(e) {
      console.log(e)
      console.log(this.tabs[e])
      if (e == 1) return
      let item = this.tabs[e]
      this.$router.push({ name: item.path })
    },
    onSearch: function () {
      this.$refs.table.refresh(true)
    },
    onStatusChange: function (item) {
      this.$message.loading({ content: '处理中...', key: 'changeLoading' })
      adoptCatChangeStatus({ id: item.id }).then((res) => {
        if (res.code == 0) {
          this.$refs.table.refresh()
          this.$message.success({ content: res.msg, key: 'changeLoading' })
        } else {
          this.$message.warning({ content: res.msg, key: 'changeLoading' })
        }
      })
    },
    handleEdit: function (item) {
      this.form = JSON.parse(JSON.stringify(item))
      this.visibleEdit = true
    },
    handleDelete: function (item) {
      this.$message.loading({ content: '处理中...', key: 'changeLoading' })
      adoptCatDelItem({ id: item.id }).then((res) => {
        if (res.code == 0) {
          this.$refs.table.refresh()
          this.$message.success({ content: res.msg, key: 'changeLoading' })
        } else {
          this.$message.warning({ content: res.msg, key: 'changeLoading' })
        }
      })
    },
    onEditOk: function () {
      this.$refs['catForm'].validate((valid) => {
        if (valid) {
          this.confirmLoading = true
          adoptCatEditItem({ ...this.form })
            .then((res) => {
              if (res.code == 0) {
                this.$refs.table.refresh(true)
                this.visibleEdit = false
                this.$message.success({ content: res.msg })
              } else {
                this.$message.error({ content: res.msg })
              }
            })
            .catch((error) => {
              console.log(error)
            })
            .then(() => {
              this.confirmLoading = false
            })
        }
      })
    },
    onCreate: function () {
      this.form = Object.assign({}, defaultForm)
      this.visibleEdit = true
    },
    onChange: function (e) {
      this.form.is_show = e ? '1' : '0'
    },
  },
}
</script>
<style lang="less" scoped>
</style>
